<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                      默认排行
                    </div>
                    <div class="panel-footer" v-for="(item,index) in article">
                        
                        <img class="ima" @click="personal(item.user)" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                        <a @click='detail(item.id)' class="title">{{item.title}}</a>
                        <span class="right">
                            <span><i class="fa fa-heart-o" aria-hidden="true"></i></span>
                            <el-divider direction="vertical"></el-divider>
                            <span><i class="fa fa-share" aria-hidden="true"></i></span>
                        </span>
                        
                    </div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[8, 16, 32, 64]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                  </div>
                
            </div>

            <div class="col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                      Python技术论坛
                    </div>
                    <div class="panel-footer">
                        <div class="word">               
        我们是高品质的 Python 中文社区，致力于为 Python 工程师提供一个知识共享，协同互助的平台。我们将会是国内最靠谱的 Python 论坛。
                        </div>
                        <el-row class="bbtn">
                            <el-button type="success" ><span><i class="fa fa-handshake-o" aria-hidden="true"></i></span>&nbsp加入我们</el-button>
                            <el-button type="primary" @click="send" class="fatie"><span><i class="fa fa-pencil" aria-hidden="true"></i></span>&nbsp发帖</el-button>
                        </el-row>
                    </div>
                  </div>
            </div>
        
        </div>
    </div>
    
   

   

</template>

<script>
    export default{
        data() {
            return {
                article:[],
                total:0,
                queryinfo:{
                    pagenum:1,
                    pagesize:8
                },
            }
        },
        created() {
            this.getdata()
        },
        methods: {
            send(){
                this.$router.push({path:'/send'})
            },
            detail(id){
                this.$router.push({path:'/article',query:{id:id}})
            },
            async getdata(){
                const {data:res} = await this.$http.get('edit/',{
                    params:this.queryinfo
                })
                console.log(res)
                this.article = res.data
                this.total = res.total
            },
            personal(userid){
                this.$router.push({path:'/users',query:{id:userid}})
            },
            handleSizeChange(newsize){

            },
            handleCurrentChange(newpage){

            }
        },
    }
</script>

<style lang="less" scoped>
    .title{
        display: inline;
        font-size: 18px;
        padding:20px;
        line-height: 22px;
    }
    .ima{
        width: 60px;
        height: 60px;
    }
    .right{
        float: right;
        line-height: 60px;
    }
    .word{
        font-size: 1em;
    }
    .bbtn{
        padding: 20px;
    
    }
    .fatie{
        margin-left: 30px !important;
    }
</style>
